// Copyright (C) 2018 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "theme";

.pf-sidebar {
  --sidebar-padding-bottom: 40px;
  --sidebar-timing: 0.15s;

  color: var(--pf-sidebar-on-surface);
  grid-area: sidebar;
  z-index: 4;
  background-color: var(--pf-sidebar-surface);
  overflow: hidden;
  width: var(--sidebar-width);
  display: flex;
  position: relative;
  flex-direction: column;
  border-right: 1px solid var(--pf-sidebar-border);
  transition:
    margin-left var(--anim-easing) var(--sidebar-timing),
    visibility linear var(--sidebar-timing);
  > * {
    border-bottom: 1px solid var(--pf-sidebar-border-secondary);
  }

  input[type="file"] {
    display: none;
  }
  > header {
    font-family: var(--pf-font-compact);
    font-weight: 700;
    font-size: 24px;
    height: var(--topbar-height);
    line-height: var(--topbar-height);
    vertical-align: middle;
    padding: 0 12px;
    color: var(--pf-sidebar-on-surface);
    overflow: visible;
    .pf-sidebar__brand {
      height: 36px;
      margin-top: 4px;
    }
    &::before {
      z-index: 10;
    }
    &.pf-sidebar__channel--canary::before,
    &.pf-sidebar__channel--autopush::before {
      display: block;
      position: absolute;
      font-size: 10px;
      line-height: 5px;
      font-family: var(--pf-font);
      top: 7px;
      right: 48px;
    }
    &.pf-sidebar__channel--canary::before {
      content: "CANARY";
      color: #ffd700;
    }
    &.pf-sidebar__channel--autopush::before {
      content: "AUTOPUSH";
      color: #aed581;
    }
  }

  .pf-sidebar-button {
    position: fixed;
    z-index: 5;
    height: var(--topbar-height);
    left: calc(var(--sidebar-width) - 50px);
    border-radius: 0;
    border-bottom: inherit;
    visibility: visible; // So stays visible when the sidebar is hidden.
    transition: left var(--anim-easing) var(--sidebar-timing);
    width: 50px;
    overflow: hidden;
    > button {
      vertical-align: middle;
    }
  }

  &--hidden {
    visibility: hidden;
    margin-left: calc(var(--sidebar-width) * -1);
    .pf-sidebar-button {
      left: 0;
      background-color: transparent;
      border-radius: unset;
      border-bottom: none;
      color: #aaaaaa;
    }
  }

  &__scroll {
    overflow-y: auto;
    flex: 1;

    // Override scrollbar colors for the sidebar as it doesn't use the theme
    // provided styles.
    scrollbar-color: var(--pf-sidebar-border)
      var(--pf-sidebar-surface-secondary);

    &::-webkit-scrollbar {
      width: 0.5em;
    }
    &::-webkit-scrollbar-track {
      background-color: var(--pf-sidebar-surface-secondary);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--pf-sidebar-border);
      border-radius: 2px;
    }
  }

  &__scroll-container {
    position: relative;
    min-height: 100%;
    padding-bottom: var(--sidebar-padding-bottom);

    > section {
      padding: 12px 0 4px 0;
      max-height: 60px;
      .pf-sidebar__section-header {
        cursor: pointer;
        > h1,
        > h2 {
          letter-spacing: 0.25px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0 12px;
        }
        > h1 {
          font-size: 15px;
        }
        > h2 {
          color: rgba(255, 255, 255, 0.5);
          font-size: 12px;
          margin-top: 8px;
          font-weight: 400;
        }
        &:before {
          @include material-icon("expand_more");
          float: right;
          color: rgba(255, 255, 255, 0.3);
          margin-right: 12px;
          margin-top: -4px;
        }
      }
      &:hover {
        background: color-hover-surface(transparent, currentColor);
      }
      &.pf-sidebar__section--expanded {
        background-color: var(--pf-sidebar-surface-secondary);
        max-height: unset;
        .pf-sidebar__section-header {
          padding-bottom: 8px;
          h2 {
            display: none;
          }

          &:before {
            content: "expand_less";
          }
        }

        .pf-sidebar__section-content {
          pointer-events: inherit;
          opacity: 1;
        }
      }
    }

    .pf-sidebar__section-content {
      pointer-events: none;

      opacity: 0;
      color: var(--pf-sidebar-on-surface-muted);
      a {
        color: inherit;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      li {
        a {
          line-height: 24px;
          font-size: 14px;
          padding: 4px 12px;
          text-decoration: none;
          display: block;
          &.pending {
            color: rgba(255, 255, 255, 0.3);
            &::after {
              content: " ";
              display: inline-block;
              vertical-align: middle;
              box-sizing: border-box;
              width: 18px;
              height: 18px;
              margin-left: 10px;
              border-radius: 50%;
              border: 2px solid #b4b7ba;
              border-color: #b4b7ba transparent;
              animation: pending-spinner 1.25s linear infinite;
            }
            @keyframes pending-spinner {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
          }
          &[disabled] {
            text-decoration: line-through;
          }
        }
        .pf-sidebar__button-icon {
          margin-right: 10px;
          font-size: 20px;
        }
        &:hover {
          background: color-hover-surface(transparent, currentColor);
        }
        .pf-sidebar__trace-file-name {
          white-space: break-spaces;
          font-family: var(--pf-font-compact);
          word-break: break-all;
          font-weight: 300;
          letter-spacing: 0;
          margin-top: -2px;
        }
      }
    }
  }

  .pf-sidebar__footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 2px 10px;
    display: grid;
    height: -var(--sidebar-padding-bottom);
    grid-template-columns: repeat(4, min-content);
    grid-gap: 10px;

    > button {
      color: hsl(217, 39%, 94%);
      i {
        font-size: 24px;
      }

      &:hover {
        color: hsl(45, 100%, 48%);
      }
    }

    > .pf-sidebar__dbg-info-square {
      font-family: var(--pf-font-compact);
      width: 24px;
      height: 24px;
      line-height: 24px;
      user-select: none;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin: 1px 0;
      background: var(--pf-sidebar-surface-secondary);
      border-radius: $border-radius;
      font-size: 12px;
      text-align: center;
      &--green {
        background: var(--pf-color-success);
        color: var(--pf-color-text-on-success);
      }
      &--amber {
        background: var(--pf-color-warning);
        color: var(--pf-color-text-on-warning);
      }
      &--red {
        background: var(--pf-color-danger);
        color: var(--pf-color-text-on-danger);
      }
      > div {
        font-size: 10px;
        line-height: 11px;
      }
    }

    .pf-sidebar__version {
      position: absolute;
      right: 8px;
      bottom: 3px;
      font-size: 12px;
      font-family: var(--pf-font-compact);
      a {
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
      }
      margin-top: 11px;
    }
  }
}

// Note: The hiring banner doesn't use theme colors.
.pf-hiring-banner {
  font-size: 12px;
  background: #db4634;
  box-shadow: 0 0 3px var(--pf-color-box-shadow);
  left: -65px;
  letter-spacing: 1px;
  line-height: 25px;
  position: absolute;
  text-align: center;
  top: 20px;
  transform: rotate(-45deg);
  width: 200px;
  z-index: 5;

  a {
    color: white;
    text-decoration: none;
  }
}
